<template>
             <div class="gF_content_right">
                    <div class="gF_content_top">
                        <div style="margin-bottom:15px">任务完成率</div>
	                <div id="fourth" style="width:120px;height:120px"></div>
                    </div>
                    <div class="gF_content_top">
                        <div style="margin-bottom:15px">任务延误率</div>
                         <div id="three" style="width:120px;height:120px"></div>
                    </div>
                    <!-- <div class="gF_content_top">
                        <div>任务类型</div>
                        <div id="main" style="width:160px;height:160px"></div>
                    </div>
                    <div class="gF_content_top">
                        <div>缺陷类型</div>
                        <div id="mainTwo" style="width:160px;height:160px"></div>

                    </div> -->
                </div>
</template>
<script>
 import * as echarts from 'echarts'
 export default({
    props: ['taskSum','taskTotal'],
     data () {
         return {
              datalist:{},
              taskdatalist:{},
              progresswidth:100,
              Completionrate:0,
              Delayrate:0
         }
     },
     created () {
             this.datalist=this.taskSum
             if(this.datalist.taskNum!=0){
               this.Completionrate=this.datalist.finishNum/this.datalist.taskNum*100
                //延误率计算
                this.Delayrate=this.datalist.timeoutNum/this.datalist.taskNum*100
             }
     },
     mounted () {
        //  this.binshow()
         this.drawCharts()
         this.threeclick()
        //  this.binshowTWO()

     },
     watch: {
       	taskTotal: {
              handler(val, oldval) {
				      this.taskdatalist=val
              // this.$nextTick(() => {this.binshow();this.binshowTWO()});

			 },
                // 深度观察监听
                 deep: true,
                 immediate:true
            },
       	taskSum: {
              handler(val, oldval) {
				      this.datalist=val
              if(this.datalist.taskNum!=0){
                //完成率计算
               this.Completionrate=Math.round(this.datalist.finishNum/this.datalist.taskNum*100)
                //延误率计算
                this.Delayrate=Math.round(this.datalist.timeoutNum/this.datalist.taskNum*100)
                  this.$nextTick(() => {this.drawCharts();this.threeclick()});
             }
			 },
                // 深度观察监听
                 deep: true,
                 immediate:true
            },
     },
     methods: {
       //延误率
      threeclick() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("three"));
      var e = this.Delayrate;
      var option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",// 通过x,y将标题(进度)定位在圆环中心
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap:false,
          hoverAnimation: false,
          label: {
            normal: {
              show: true,
            //   position: "center",
            //   fontSize:20,
            //    formatter: "{d}%"
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e,
              name: "",
              itemStyle: {
                color: "#167EF8",
              },
            },
            {
              value: 100 - e,
              name: "",
              itemStyle: {
                color: "#F0F0F1",
              },
            },
          ],
        },
      };
      myChart.setOption(option);
      },
     //完成率
      drawCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("fourth"));
      var e = this.Completionrate;
      var option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",// 通过x,y将标题(进度)定位在圆环中心
        },
        tooltip: {
          trigger: "item",
          formatter: "{d}%",
          show: false,
        },
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: {
          name: "",
          type: "pie",
          radius: ["65%", "85%"],
          avoidLabelOverlap:false,
          hoverAnimation: false,
          label: {
            normal: {
              show: true,
            //   position: "center",
            //   fontSize:20,
            //    formatter: "{d}%"
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: e,
              name: "",
              itemStyle: {
                color: "#167EF8",
              },
            },
            {
              value: 100 - e,
              name: "",
              itemStyle: {
                color: "#F0F0F1",
              },
            },
          ],
        },
      };
      myChart.setOption(option);
    },
  //     binshow(){
  //       var chartDom = document.getElementById('main');
  //       var myChart = echarts.init(chartDom);
  //       var option;
  //    option = {
  //   tooltip: {
  //       trigger: 'item'
  //   },
  //   legend: {
  //       top: '5%',
  //       left: 'center',
  //       show:false
  //   },
  //   series: [
  //       {
  //           name: '任务',
  //           type: 'pie',
  //           radius: ['40%', '60%'],
  //           avoidLabelOverlap: false,
  //            hoverOffset:1,
  //           showEmptyCircle: true ,
  //           label: {
  //               show: false,
  //               position: 'center'
  //           },
  //           emphasis: {
  //               label: {
  //                   show: false,
  //                   fontSize: '20',
  //                   fontWeight: 'bold'
  //               }
  //           },
  //           labelLine: {
  //               show: false
  //           },
  //           color:[
  //               '#5470c6',
  //               "#2C7EF8",
  //               '#BDE98C',
  //               '#80ABFE',
  //               '#F8CA2C',
  //               '#FFE176'
  //           ],
  //           data: [
  //               {value: this.taskdatalist.demand, name: '需求'},
  //               {value: this.taskdatalist.Design, name: '设计'},
  //               {value: this.taskdatalist.development, name: '开发'},
  //               {value: this.taskdatalist.test, name: '测试'},
  //               {value: this.taskdatalist.defect, name: '缺陷'},
  //               {value: this.taskdatalist.other, name: '其他'}
  //           ]
  //       }
  //   ]
  //        };
  //  option && myChart.setOption(option);

  //   },
  //     binshowTWO(){
  //       var chartDom = document.getElementById('mainTwo');
  //       var myChart = echarts.init(chartDom);
  //       var option;
  //    option = {
  //   tooltip: {
  //       trigger: 'item'
  //   },
  //   legend: {
  //       top: '5%',
  //       left: 'center',
  //       show:false
  //   },
  //   series: [
  //       {
  //           name: '访问来源',
  //           type: 'pie',
  //           radius: ['40%', '60%'],
  //           avoidLabelOverlap: false,
  //            hoverOffset:1,
  //           showEmptyCircle: true ,
  //           label: {
  //               show: false,
  //               position: 'center'
  //           },
  //           emphasis: {
  //               label: {
  //                   show: false,
  //                   fontSize: '20',
  //                   fontWeight: 'bold'
  //               }
  //           },
  //           labelLine: {
  //               show: false
  //           },
  //           color:[
  //               '#5470c6',
  //               "#2C7EF8",
  //               '#BDE98C',
  //               '#80ABFE',
  //               '#F8CA2C',
  //               '#FFE176'
  //           ],
  //           data: [
  //               {value: 1048, name: '搜索引擎'},
  //               {value: 735, name: '直接访问'},
  //               {value: 580, name: '邮件营销'},
  //               {value: 484, name: '联盟广告'},
  //               {value: 300, name: '视频广告'}
  //           ]
  //       }
  //   ]
  //                  };
  //           option && myChart.setOption(option);

  //   },


    }
 })
</script>
 <style>
.gF_content_right{
    width: 100%;
    min-width: 250px;
    padding: 24px 24px 10px 24px;
    box-sizing: border-box;
    border: solid 1px #ecedf0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.gF_content_top{
    width: 45%;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
</style>
